<template>
  <div class="buyer">
      <div class="buyer_search">
        <ul>
            <li class="buyer_time"><span>生成日期</span>
                <div class="block">
                    <el-date-picker
                    v-model="time"
                    type="daterange"
                    range-separator="至"
                    :picker-options="pickerOptions"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </li>
            <li><span>授信状态</span>
                <el-select v-model="credit" placeholder="请选择" clearable>
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
            </li>
            <li><span>国内客户编码</span>
                <el-input placeholder="请输入国内客户编码" v-model="foreignCustomersNum"></el-input>
            </li>
            <li><span>公司名称</span>
                <el-input placeholder="请输入公司名称" v-model="customerName"></el-input>
            </li>
        </ul>
        <el-button type="primary" @click="query">查询</el-button>
      </div>
      <div class="buyer-table">
        <el-table :data="tableData" style="width: 100%" border stripe v-loading="loading">
          <el-table-column prop="customerCode" label="国内客户编码" class-name="customerCode" width="180px">
          </el-table-column>
          <el-table-column prop="customerName" label="公司名称" width="180px">
          </el-table-column>
          <el-table-column prop="customerContacts" label="联系人" min-width="100px">
          </el-table-column>
          <el-table-column prop="createTime" label="生成时间" width="180px">
              <template slot-scope="scope">
                {{_getTime(scope.row.createTime)}}
              </template>
          </el-table-column>
          <el-table-column prop="modifyTime" label="授信日期" width="180px">
              <template slot-scope="scope">
                {{_getTime(scope.row.modifyTime)}}
              </template>
          </el-table-column>
          <el-table-column prop="credit" label="授信状态" min-width="100px">
            <template slot-scope="scope">
                {{scope.row.credit === 2 ? '黑名单' : (scope.row.credit === 1 ? '白名单' : '')}}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="customerMoney" label="授信额度(RMB)" min-width="120px">
          </el-table-column> -->
          <el-table-column prop="" label="操作" min-width="180px">
              <template slot-scope="scope">
                  <el-button type="primary" @click="lookFor(scope.$index, scope.row)">查看</el-button>
                  <el-button type="primary" @click="creditClick(scope.$index, scope.row)">授信</el-button>
              </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currPage"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize">
          </el-pagination>
        </div>
      </div>
      <!-- 创建和修改卖家 -->
      <el-dialog :visible.sync="dialogFormVisible">
        <el-form :model="dynamicValidateForm" label-width="120px" label-position="right">
          <el-form-item label="国内客户编码">
            <el-input v-model="dynamicValidateForm.customerCode" disabled></el-input>
          </el-form-item>
          <el-form-item label="公司名称">
            <el-input v-model="dynamicValidateForm.customerName" disabled></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="dynamicValidateForm.customerAddress" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="dynamicValidateForm.customerEmail" disabled></el-input>
          </el-form-item>
          <el-form-item label="联系人" v-for="(item, index) in dynamicValidateForm.customerContacts" :key="item.name">
            <el-input v-model="item.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="电话" v-for="(item, index) in dynamicValidateForm.customerPhone" :key="item.phone">
            <el-input v-model="item.phone" disabled></el-input>
          </el-form-item>
          <!-- <el-form-item label="银行账户信息">
            <el-input v-model="dynamicValidateForm.customerBankAccount" disabled></el-input>
          </el-form-item> -->
          <el-form-item label="户名" prop="customerBankAccountNameCHS">
            <el-input v-model="dynamicValidateForm.customerBankAccountNameCHS" disabled></el-input>
          </el-form-item>
          <el-form-item label="开户行" prop="customerOpeningBankCHS">
            <el-input v-model="dynamicValidateForm.customerOpeningBankCHS" disabled></el-input>
          </el-form-item>
          <el-form-item label="开户行账号" prop="customerBankAccountNumCHS">
            <el-input v-model="dynamicValidateForm.customerBankAccountNumCHS" disabled></el-input>
          </el-form-item>
          <el-form-item label="附件">
              <!-- action是上传的地址必填 -->
            <el-upload
              class="upload-demo"
              action="/api/common/upload"
              :on-change="handleChange"
              :on-preview="fileDown"
              :file-list="this.fileList" disabled>
              <!-- <el-button size="small" type="primary" disabled>点击上传</el-button> -->
              </el-upload>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="dynamicValidateForm.customerRemarks" disabled></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>
      <!-- 是否删除 -->
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%">
          <p class="credit-p">授信状态</p>
          <template>
              <el-radio-group v-model="radio">
                <el-radio :label="1">白名单</el-radio>
                <el-radio :label="2">黑名单</el-radio>
              </el-radio-group>
            </template>
            <!-- <p class="credit-p">授信金额</p>
            <el-input placeholder="请输入内容" v-model="rmb">
                <template slot="append">RMB</template>
              </el-input> -->
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="creditSure">确 定</el-button>
          </span>
        </el-dialog>
  </div>
</template>
<script>
import {getMessage, creditY, lookMore, getUpdata} from '@/server/customercredit/index.js'


export default {
  data(){
      return {
          dialogVisible: false,//授信弹框是否显示
          dialogFormVisible: false,//表单弹框是否显示
          // rmb: '',//授信填写金额
          credit:'',//授信选择黑白名单
          _credit:'',//授信选择黑白名单
          radio:'',//授信选择黑白名单
          time: '',//日期
          _time: '',//日期
          fileList:[],
          loading: false,//加载中
          userMessage: '',//当前登录用户信息
          foreignCustomersNum: '',//国内客户编码
          _foreignCustomersNum: '',//国外客户编码
          customerName: '',//公司名称
          _customerName: '',//公司名称
          _chooseTablecontent: {},//选择当前行整行的内容
          _query: {},//暂存query信息
          currPage: 1,//默认当前页数
          pageSize: 30,//默认当前页大小
          totalSize: 0,//总数据条数
          options: [{//下拉菜单数据
                value: '',
                label: '无'
              }, {
                value: '1',
                label: '白名单'
              }, {
                value: '2',
                label: '黑名单'
              }],
          tableData: [],//表格数据
          dynamicValidateForm: {
              type: 2,
              customerCode: '',//国内客户编码
              customerName: '',//公司名称
              customerEmail: '',//邮箱
              customerContacts: [],//联系人
              customerAddress: '',//地址
              customerPhone: [],//联系电话
              fileList:[],//附件
              customerRemarks: '',//备注
              customerOpeningBankCHS:'',//银行账户信息
              customerBankAccountNameCHS:'',//银行账户信息
              customerBankAccountNumCHS:'',//银行账户信息
          },
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now() - 8.64e6
            }
          },
      }
  },
  mounted() {
    //获取当前权限
    this.userMessage = JSON.parse(localStorage.getItem("userMsg"));
    this.query();
  },
  methods: {
    //   查询表格创建
      query() {
          this.currPage = 1;
          this.pageSize = 30;
          this._credit = this.credit;
          this._foreignCustomersNum = this.foreignCustomersNum;
          this._customerName = this.customerName;
          this._time = this.time;
        let obj = {
            type : 2,
            gt_createTime: (this.time===null) || isNaN(Date.parse(this.time[0])) ? '' : Date.parse(this.time[0]),
            lt_createTime: (this.time===null) || isNaN(Date.parse(this.time[1])) ? '' : Date.parse(this.time[1]) + (24 * 3600 * 1000),
            credit: this.credit,//授信状态
            customerCode: this.foreignCustomersNum,//国内客户编码
            customerName: this.customerName,//公司名称
            currPage: 0,
            pageSize: this.pageSize
        };

        this._query = obj;
        this.queryMsg(obj);
      },
      queryMsg(obj) {
          this.loading = true;
          getMessage(obj).then((res) => {
              try {
                  if(res.code === 1){
                      this.totalSize = res.data.totalSize
                      this.tableData = res.data.datas
                  }else{
                      this.$message.error('查询失败，请检查网络后重试');
                  }
              } catch (e) {
                  this.$message.error('查询失败，请检查网络后重试');
              }
          });
          this.loading = false;
      },
    //   点击授信
      creditClick(index, row) {
        this._chooseTablecontent = row;
        this.dialogVisible = true;
        this.radio = row.credit;

      },
    //   授信确认
      creditSure() {
          let obj = this._chooseTablecontent;
          obj.credit = this.radio;
          // obj.customerMoney = this.rmb;
          obj.type = 2;
          delete obj.createTime;
          delete obj.modifyTime;
        creditY(obj).then((res) => {
            try {
                if(res.code){
                    this.$message({
                      message: '授信成功',
                      type: 'success'
                    });
                }else{
                    this.$message.error('提交错误，请检查网络后重试');
                }
            } catch (e) {
                this.$message.error('提交错误，请检查网络后重试');
            }
            this.dialogVisible = false;
        }).then((res)=>{
            this.queryMsg(this._query);
        });
      },
    //   点击查看
      lookFor(index, row) {
          let obj = {
              type: 2,
              customerCode: row.customerCode,
              customerName: row.customerName,
              customerContacts: row.customerContacts,
              createTime: row.createTime,
              // : row.,
              credit: row.credit,
              // customerMoney: row.rmb
          };
          let obj2 = {
            'type': 1,
            'customerId': row.id,
            'status': 1
          };
          getMessage(obj).then((res)=>{
              if(res.code === 1){
                  let xxx = res.data.datas[0];
                  this.dynamicValidateForm = xxx;
                  this.dynamicValidateForm.customerContacts = this._makeObj(xxx.customerContacts, 'name');
                  this.dynamicValidateForm.customerPhone = this._makeObj(xxx.customerPhone, 'phone');
                  this.dialogFormVisible = true;
              }else{
                  this.$message.error('查询失败');
              }
              getUpdata(obj2).then((res)=>{
                  try {
                      if(res.code ===1){
                          this.fileList = res.data.datas;
                          for(let i = 0 ; i <= this.fileList.length ; i++){
                              this.fileList[i].name = this.fileList[i].fileName
                          }
                      }else{
                          return
                      }
                  } catch (e) {
                    return
                  }
              })
          })
      },
      handleChange: (file, fileList) => {
        // this.fileList3 = fileList.slice(-3);
      },
      // 下载文件
      fileDown(file) {
        window.open('http://47.104.93.41/api/common/download?id='+file.id)
      },
      revise_table: function(){
          this.dialogFormVisible = true
      },
      // 分页每页多少条
      handleSizeChange(val) {
          this.pageSize = val;
          let obj = {
              type : 2,
              gt_createTime: (this._time===null) || isNaN(Date.parse(this._time[0])) ? '' : Date.parse(this._time[0]),
              lt_createTime: (this._time===null) || isNaN(Date.parse(this._time[1])) ? '' : Date.parse(this._time[1]) + (24 * 3600 * 1000),
              credit: this._credit,//授信状态
              customerCode: this._foreignCustomersNum,//国外客户编码
              customerName: this._customerName,//公司名称
              currPage: 0,
              pageSize: this.pageSize
          };
          this.queryMsg(obj);
      },
      // 分页当前页
      handleCurrentChange(val) {
          this.currPage = val;
          let obj = {
              type : 2,
              gt_createTime: (this._time===null) || isNaN(Date.parse(this._time[0])) ? '' : Date.parse(this._time[0]),
              lt_createTime: (this._time===null) || isNaN(Date.parse(this._time[1])) ? '' : Date.parse(this._time[1]) + (24 * 3600 * 1000),
              credit: this._credit,//授信状态
              customerCode: this._foreignCustomersNum,//国外客户编码
              customerName: this._customerName,//公司名称
              currPage: val - 1,
              pageSize: this.pageSize
          };
          this.queryMsg(obj);
      },
      // 将数组对象转化为字符串
      _joinString(arr) {
          let str = '';
          for(let i = 0 ; i < arr.length ; i++) {
              if(arr[i].name == undefined){
                  str += arr[i].phone + ','
              }else{
                  str += arr[i].name + ','
              }
          };
          str = str.slice(0, str.length - 1);
          return str
      },
      // 将字符串转化为数组对象
      _makeObj(str, name) {
          let arr = str.split(','),
              arrReturn = [];
          for(let i = 0 ; i < arr.length ; i++) {
              if(name == 'name'){
                  arrReturn.push({
                    'name': arr[i]
                  })
              }else{
                  arrReturn.push({
                    'phone': arr[i]
                  })
              }
          };
          return arrReturn
      },
      // 将时间戳转化为时间字符串
      _getTime(x){
          if(x === null || x === undefined || x === ''){
              return '-'
          }
          let time = new Date(x);
          return time.getFullYear() + '/' + (time.getMonth() + 1) + '/' + time.getDate();
      },
  }
}
</script>
<style lang="sass" scoped>
@import "../../assets/css/common.sass"
.buyer
  width: 100%
  padding: 20px
  border: 1px solid #e6ebf5
  border-top: none
  box-sizing: border-box
  border-radius: 0 0 4px 4px
.buyer_search
  width: 100%
  border: 1px solid #e6ebf5
  border-radius: 4px
  padding: 20px
  padding-bottom: 10px
  box-sizing: border-box
  &:after
    @include clear
  ul
    width: 90%
    float: left
    &:after
      @include clear
    li
      width: 33%
      height: 40px
      line-height: 40px
      float: left
      padding-right: 10px
      box-sizing: border-box
      margin-bottom: 10px
      span
        font-size: 14px
        display: inline-block
        width: 90px
      .el-input, .el-select,
        width: 60%
      .block
        width: 60%
        display: inline-block
        div
          width: 100%
    .buyer_time
      width: 60%
      .block
        width: 70%
  .el-button
    width: 10%
    height: 40px
.buyer-table
  box-sizing: border-box
  // border: 1px solid #e6ebf5
  border-radius: 4px
  margin-top: 20px
  border-right: none
  .el-button
    height: 30px
    line-height: 6px
  .el-table
    border-radius: 4px
.el-form-item
  margin-bottom: 20px
  .el-input, .el-textarea, .upload-demo
    width: 95%
.el-dialog__body
  // padding-left: 30px
.el-select-dropdown__item
  text-indent: 20px
.credit-p
  margin-top: 10px
  margin-bottom: 10px
</style>
